<template>
  <div class="progressChart" ref="progressChart"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "ProgressChart",
  mounted() {
    echarts.init(this.$refs.progressChart).setOption({
      xAxis: {
        show: false,
        // 设置最大值与最小值
        min: 0,
        max: 100,
      },
      yAxis: {
        show: false,
        // 使y轴均匀分布，会使柱状图倒过来
        type: "category",
      },
      // 提示框
      tooltip:{
          textStyle:{
              // 文字颜色   
              color:'red'
          },
          // 边界颜色   
          borderColor:'#eee',
          // 背景颜色
          backgroundColor:'#fff'
      },
      series: {
        type: "bar",
        data: [78],
        barWidth: 10,
        color: "red",
        // 显示背景
        showBackground: true,
        backgroundStyle: {
          color: "#eee",
        },
        label: {
          show: true,
          // 文本
          formatter: "|",
          color: "red",
          // 位置
          position: "right",
        },
      },
      grid: {
        top: 0,
        bottom: 0,
        left: 0,
        right: 0,
      },
    });
  },
};
</script>

<style scoped>
.progressChart {
  width: 100%;
  height: 100%;
}
</style>